﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" >
        <title>多行文本标签textarea的简单应用</title>
        <style>
            select {
                width: 20em;
                display: block;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <h3>多行文本标签textarea的简单应用</h3>
        <hr />
        <p>
            简单下拉菜单（单选）：
        </p>
        <select>
            <option value="apple">苹果</option>
            <option value="cherry">樱桃</option>
            <option value="grape">葡萄</option>
        </select>

        <p>
            分组下拉菜单（多选）：
        </p>
        <select>
            <optgroup label="水果类">
                <option value="apple">苹果</option>
                <option value="cherry">樱桃</option>
                <option value="grape">葡萄</option>
            </optgroup>
            <optgroup label="蔬菜类">
                <option value="potato">土豆</option>
                <option value="tomato">番茄</option>
                <option value="eggplant">茄子</option>
            </optgroup>
        </select>
        </select>

        <p>
            简单列表菜单（多选）：
        </p>
        <select multiple>
            <option value="apple">苹果</option>
            <option value="cherry">樱桃</option>
            <option value="grape">葡萄</option>
        </select>

        <p>
            分组列表菜单（多选）：
        </p>
        <select multiple size="8">
            <optgroup label="水果类">
                <option value="apple">苹果</option>
                <option value="cherry">樱桃</option>
                <option value="grape">葡萄</option>
            </optgroup>
            <optgroup label="蔬菜类">
                <option value="potato">土豆</option>
                <option value="tomato">番茄</option>
                <option value="eggplant">茄子</option>
            </optgroup>
        </select>
    </body>
</html>
